<template>
  <div class="header-wrapper">
    <div class="header-top">
      <div class="w1190">
        <div class="header-top-text">
          卓一慧众一站式服务平台
          <a-button type="link" @click="$router.push({ name: 'index' })">返回首页</a-button>
        </div>
        <div class="header-top-component">
          您好， {{name}} &nbsp; <a @click="logout">退出</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              消息 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <router-link :to="{ name: 'OrderMessage' }">订单消息</router-link>
              </a-menu-item>
              <a-menu-item>
                <router-link :to="{ name: 'CouponMessage' }">优惠消息</router-link>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-divider type="vertical" />
          <router-link :to="{ name: 'MemberIndex' }">个人中心</router-link>
          <a-divider type="vertical" />
          咨询热线：<span>400-9932-799</span>
        </div>
      </div>
    </div>
    <div class="header-logo">
      <div class="w1190">
        <div class="logo-img">
          <router-link :to="{ name: 'index' }"><img src="@/assets/images/logo.png"/></router-link>
        </div>
        <div class="header-search">
          <a-form-model
            layout="inline"
          >
            <a-form-model-item style="margin-right:8px">
              <a-input v-model="keyword" size="large" style="width: 400px" placeholder="请输入要搜索的关键词">
                <a-icon slot="prefix" type="search" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item style="margin-right:8px">
              <a-button class="btn-search" size="large" type="primary" @click="onSearch">立即查找</a-button>
            </a-form-model-item>
            <a-form-model-item style="margin-right:0">
              <a-badge :count="cartNum">
                <a-button size="large" icon="shopping-cart" type="danger" ghost @click="$router.push({ name: 'Cart' })">我的购物车</a-button>
              </a-badge>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCartList } from '@/api/cart'

export default {
  name: 'GlobalHeader',
  data () {
    return {
      keyword: '',
      cartNum: 0
    }
  },
  created () {
    this.getCartNum()
  },
  methods: {
    logout () {
      this.$store.dispatch('Logout').then(() => {
        window.location.reload()
      })
    },
    getCartNum () {
      getCartList().then(res => {
        this.cartNum = res.result.total_count
      })
    },
    onSearch () {
      if (this.keyword === '') {
        this.$warning({
          title: '务必输入要搜索的关键词'
        })
        return false
      }
      this.$nextTick(() => {
        this.$router.replace({ name: 'Search', query: { keyword: this.keyword } })
      })
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style scoped>
.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.header-top {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  font-size: 12px;
}

.header-top .ant-btn {
  font-size: 12px
}

.header-top .header-top-text {
  float: left;
}

.header-top .header-top-component {
  float: right;
}

.header-top .header-top-component a {
  color:#333;
}

/deep/ .header-top .ant-btn {
  color:#333;
}

.header-logo {
  height: 133px;
  background: #fff;
  overflow: hidden;
}

.header-logo .w1190{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo .logo-img{
  float: left;
}

.header-logo .header-search{
  wdith: 650px;
  float: right;
}

.btn-search { background: #000; border: 1px solid #000; }
</style>
